<template>
  <div class="hello">
    籍贯：<input v-model="test" type="text" id="address" />
    姓名：<input v-show="view" :style="co==true?'background:red;':''" type="text" v-focus id="name" placeholder="我有v-focus,所以,我获取了焦点" />
    <button @click="view=!view">◎</button>
    <button @click="updateColor">换个颜色</button>
    <hr />
    <h3>组件双向绑定</h3>
    源数据：<currency v-model="money"></currency><br />
    父组件：<input type="text" v-model="money" />
  </div>
</template>

<script>
  import increase from './ca/ca';
  import cselect from './ca/cselect';
  import currency from './currency';
  var vo = null;
  let v = {
    name: 'HelloWorld',
    components: {
      increase,
      cselect,
      currency
    },
    data() {
      return {
        co: false,
        view: true,
        test: '',
        rangeValue: 0,
        msg: 'Welcome to Your Vue.js App',
        platform: "新浪 · 微博",
        money: null
      }
    },
    methods: {
      updateColor() {
        this.co = true;
      },
      lookVal() {
        console.log(this.$data)
      }
    },
    created() {
      window.vo = this;
    }
  }
  export default v;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
